<template>
  <div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import instance from "@/api/api";
import debounce from "@/utils/debounce";
import { Toast } from 'vant';
export default {
  name: "login",
  data() {
    return {
      username: "",
      password: "",
      debounceloginfn:null,
      nextTo:""
    }
  },
  methods: {
    async loginfn() {
      //登录验证业务
     let {data} = await instance.post("/login")
      let token=data.token
      console.log(token)
      //需要把token 存放到 vuex 中
      this.$store.commit("settoken",token)
      //怎样跳转 跳转到哪里去
      let nextTo=this.nextTo
      console.log(nextTo)
      Toast({
        type:"success",
        message:"登录成功",
        onClose:()=>{
          this.$router.push({name:nextTo})
        }
      })
    },
    onSubmit(a) {
      //登录验证 用户行为事件
      // 使用防抖封装后的函数
      this.debounceloginfn();
      console.log(a);
    },
    fn(value) {
      console.log(value); //输入表单的值 正则验证
    },
  },
  created() {
    this.debounceloginfn = debounce(this.loginfn, 2000);
    this.nextTo = this.$router.currentRoute.params.id;
  },
};
</script>

<style lang="less" scoped>
</style>